<template>

  <scroller class="scroller"
            :show-scrollbar="false">

    <vm-cell label="项目名称"
             :hasTopBorder="true">
      <input slot="title"
             placeholder="项目名称"
             v-model="params.capital_source"
             class="input" />
    </vm-cell>

    <vm-cell label="金额(元)">
      <input slot="title"
             placeholder="金额"
             v-model="params.funds"
             type="number"
             class="input" />
    </vm-cell>

    <vm-cell label="资金用途">
      <input slot="title"
             placeholder="资金用途"
             v-model="params.capital_use"
             class="input" />
    </vm-cell>

    <vm-cell label="备注">
      <input slot="title"
             placeholder="备注"
             v-model="params.remark"
             class="input" />
    </vm-cell>

    <vm-button text="提交"
               class="mt-3"
               :disabled="disabled"
               @buttonClicked="submit"></vm-button>
  </scroller>

</template>
<script>
import VmButton from '../../components/vm-button.vue'
import VmCell from '../../components/vm-cell.vue'
import {
  STORAGE_FARM
} from '../../plugins/constant'

export default {
  components: { VmButton, VmCell },
  props: {},
  data() {
    return {
      farm: {},
      params: {
        customer_id: '',
        customer_name: '',
        submit_type: 3,
        customer_related_id: '',
        capital_source: '',
        capital_source_key: 'project_support',
        capital_use: '',
        funds: '',
        remark: ''
      },
      id: '',
      table: 'datum_customer_finance_capital_source',
      disabled: false
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getParams()
  },
  methods: {
    getParams() {
      this.farm = this.$storage.getSync(STORAGE_FARM) || {}
      this.$router.getParams().then(res => {
        const data = res || {}
        const row = data.data || {}
        this.params.customer_related_id = data.relatedId || ''
        this.params.customer_id = this.farm.id || ''
        this.params.customer_name = this.farm.farmName || ''
        if (row.id) {
          this.id = row.id
          Object.keys(this.params).forEach(key => {
            this.params[key] = row[key] || ''
          })
        }
      })
    },
    submit() {
      if (!this.params.capital_source) {
        return this.$notice.toast({ message: '请输入项目名称' })
      }
      if (!this.params.funds) {
        return this.$notice.toast({ message: '请输入金额' })
      }
      if (this.id) {
        this.putData()
      } else {
        this.postData()
      }
    },
    async putData() {
      this.disabled = true
      const [res] = await this.$utils.pm(this.$api.updateData({
        server: 'credit',
        table: this.table,
        id: this.id,
        data: this.params,
        errorMsg: '提交失败，请重试'
      }))
      this.disabled = false
      if (!res) { return }
      this.$notice.toast({ message: '提交成功' })
      this.$router.setBackParams({ type: 1 })
      this.$router.back()
    },
    async postData() {
      this.disabled = true
      const [res] = await this.$utils.pm(this.$api.addData({
        server: 'credit',
        table: this.table,
        data: this.params,
        errorMsg: '提交失败，请重试'
      }))
      this.disabled = false
      if (!res) { return }
      this.$notice.toast({ message: '提交成功' })
      this.$router.setBackParams({ type: 1 })
      this.$router.back()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.mt-3 {
  margin-top: 30px;
}
.input {
  flex: 1;
  height: 60px;
  font-size: 30px;
  tint-color: #999;
  text-align: right;
}
</style>
